export function myMatter(body: any, Render: any, Runner:  any, Bodies: any, World: any, Engine: any, Composite: any, MouseConstraint: any) {

  // 创建物理引擎
  const engine = Engine.create();

  const render = Render.create({
    element: body,
    engine: engine,
    options: {
      width:innerWidth,
      height:innerHeight,
      pixelRatio: 1, // 设置像素比
      background: '#fafafa', // 全局渲染模式时背景色
      wireframeBackground: '#222', // 线框模式时背景色
      showStats: true,
      // showPerformance: true,  // 性能图表
      hasBounds: false,
      enabled: true,
      wireframes: true, // 线框模式
      showSleeping: true, // 刚体睡眠状态
      showDebug: false, // Debug 信息
      showBroadphase: false, // 粗测阶段
      showBounds: false, // 刚体的界限
      showVelocity: false, // 移动刚体时速度
      showCollisions: false, // 刚体碰撞点
      showSeparations: false, // 刚体分离
      showAxes: false, // 刚体轴线
      showPositions: false, // 刚体位置
      showAngleIndicator: false, // 刚体转角指示
      showIds: true, // 显示每个刚体的 ID
      showVertexNumbers: false, // 刚体顶点数
      showConvexHulls: false, // 刚体凸包点
      showInternalEdges: false, // 刚体内部边界
      showMousePosition: false // 鼠标约束线
    }
  });

  const world = engine.world;

  // run the renderer
  Render.run(render);

  // create runner
  const runner = Runner.create();

  // run the engine
  Runner.run(runner, engine);

  // 创建地面
  const ground = Bodies.rectangle(innerWidth / 2, innerHeight, innerWidth, 100, { isStatic: true, friction: 1, frictionStatic: 10 });

  Composite.add(world, ground);

  // 全局鼠标约束
  const mouseConstraint = MouseConstraint.create(engine, {});

  // Events.on(mouseConstraint, 'enddrag',  (event) => {
  //   const mousePosition = event.mouse.position;
  //   console.log(event);
  // });
  World.add(world, mouseConstraint);


  const addBox = (x = 0, y = 0, w = 0, h = 0, options: any)=>{
    // const options = {
    //   // friction: 0.5,
    //   // restitution: 0,
    //   // frictionAir: 0.01,
    //   // frictionStatic: 0.5,
    //   // isStatic: true,
    // }
    const box = Bodies.rectangle(x, y, w, h, options);
    World.add(engine.world, box);
    return box;
  }
  return {
    render,
    engine,
    world,
    addBox,
  };
}

// 获取鼠标点击的坐标
// const handleMouseMove = event => {
//   Box(event.clientX - event.target.offsetLeft, event.clientY - event.target.offsetTop, random(30, 80), random(30, 80))
//   // setCoords({
//   //   coordsX: event.clientX - event.target.offsetLeft,
//   //   coordsY: event.clientY - event.target.offsetTop,
//   // });
//   // console.log(coords.coordsX);
//   // console.log(coords.coordsY);
// }

// 碰撞
// Events.on(matter.engine, 'collisionStart', (event: any) => {
//   const pairs = event.pairs;
//   for (let i = 0; i < pairs.length; i++) {
//     const pair = pairs[i];
//     if (pair.bodyA == box1 && pair.bodyB == box2) {
//       World.remove(matter.world, box1)
//     }
//     // console.log(pair.bodyB == box1);
//     // console.log(pair.bodyB);
//     // if(pair.bodyA == ball_1 &&pair.bodyB == ball_2 ){
//     //
//     //   //do something
//     // }
//   }
// })

// // 创建桌子
// const pedestal = matter.addBox(600, innerHeight - 50 - 10, 100, 20, options);
// const tableLeg = matter.addBox(600, innerHeight - 50 - 20 - 50, 20, 100, options);
// const tableTop = matter.addBox(600, innerHeight - 50 - 20 - 100 - 10, 200, 20, options);
//
// const table1 = Constraint.create({
//   bodyA:pedestal,
//   pointA:{x: 10,y: 10},
//   bodyB:tableLeg,
//   pointB:{x: 10,y: 50},
//   stiffness: 1,
// });
// const table2 = Constraint.create({
//   bodyA:pedestal,
//   pointA:{x: -10,y: 10},
//   bodyB:tableLeg,
//   pointB:{x: -10,y: 50},
//   stiffness: 1,
// });
// const table3 = Constraint.create({
//   bodyA:tableLeg,
//   pointA:{x: 10,y: -50},
//   bodyB:tableTop,
//   pointB:{x: 10,y: 10},
//   stiffness: 1,
// });
// const table4 = Constraint.create({
//   bodyA:tableLeg,
//   pointA:{x: -10,y: -50},
//   bodyB:tableTop,
//   pointB:{x: -10,y: 10},
//   stiffness: 1,
// });
//
// World.add(matter.world, [table1, table2, table3, table4]);
